<template>
	<view>
		<u-sticky>
			<view class="tabBox flex-row-center-sb">
				<view
					v-if="item.type <= 4"
					class="tabItem"
					:class="{ active: currentType == item.type }"
					v-for="(item, index) in tabs"
					:key="index"
					@click="currentType = item.type">
					{{ item.title }}
				</view>
				<view class="tabItem" v-if="orderDetail.orderInfo.orderStatus != 10">
					<view class="flex-row-center" @click.stop="showMore = !showMore">
						<text>更多操作</text>
						<u-icon :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>

		<!-- 基础信息 -->
		<order-basic-info
			v-if="currentType === 1"
			:orderDetail="orderDetail"
			@showOrderRemark="showOrderRemark = true"></order-basic-info>
		<!-- 违章信息 -->
		<order-illeagl-info
			v-if="currentType === 2"
			:list="orderDetail.carIllegalList"></order-illeagl-info>
		<!-- 续租信息 -->
		<order-relet-info
			v-if="currentType === 3"
			:orderNo="orderNo"
			:reletList="reletList"></order-relet-info>
		<!-- 费用信息 -->
		<order-cost-info
			v-if="currentType === 4"
			:orderRent="orderRentDetail.rent_items"
			:orderDeposit="orderDepositDetail.deposit_items"
			:orderIllegal="orderIllegalDetail.illegal_items"
			:orderVehicle="orderVehicleDetail.vehicle_items"
			:orderViolation="orderViolationDetail.violation_items"
			:orderPriceCalendars="orderRentDetail.orderPriceCalendars">
		</order-cost-info>
		<!-- 底部按钮 -->
		<!-- 	<order-operation v-if="orderDetail.orderInfo.orderStatus!=10" :orderInfo="orderDetail.orderInfo"
      :customerInfo="orderDetail.customerInfo"></order-operation> -->

		<moreNavigation
			v-if="showMore"
			:showHidden="showMore"
			:orderInfo="orderDetail.orderInfo"
			:customerInfo="orderDetail.customerInfo"
			@clickOpItem="clickOpItem"></moreNavigation>

		<u-popup :show="showPayCost" mode="center" @close="showPayCost = false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx">
				<view style="margin-bottom: 30rpx">请选择缴纳费用项</view>
				<view
					class="flex-row-center-sb payCostItem"
					v-for="(item, index) in payCostList"
					:key="index"
					@click="changeCostItem(item)">
					<text>{{ item.remark }}</text>
					<view class="flex-row-center">
						<text style="color: red; margin-right: 10rpx">待付:{{ item.unpaidAmount }}元</text>
						<image
							style="width: 40rpx; height: 40rpx"
							:src="
								item.selected == true
									? '/static/other/radio_selected.png'
									: '/static/other/radio_default.png'
							"
							mode=""></image>
					</view>
				</view>

				<view class="flex-row-center-sb" style="margin-top: 40rpx; width: 80%">
					<view
						class="alertBtn"
						style="background-color: #f8f8f8; color: #bfc3cc"
						@click="showPayCost = false">
						取消
					</view>
					<view class="alertBtn" @click="confimPayFee">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- 新增费用弹框 -->
		<u-popup :show="showPopCost" mode="bottom" @close="showPopCost = false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx 20rpx">
				<view style="margin-bottom: 30rpx">新增收费项</view>
				<uni-forms ref="form">
					<uni-forms-item label="收费项名称" labelWidth="90" required>
						<view>
							<u--input
								v-model="customCost.chargeProjectName"
								placeholder="请输入收费项名称"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="收费类型" required>
						<uni-data-checkbox v-model="customCost.chargeItemsType" :localdata="chargeItemsTypes" />
					</uni-forms-item>

					<uni-forms-item label="单价" labelWidth="90" required>
						<view>
							<u--input
								v-model="customCost.unitPrice"
								@input="check"
								type="digit"
								placeholder="请输入单价">
							</u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="数目" labelWidth="90" required>
						<view>
							<u--input
								v-model="customCost.number"
								type="number"
								placeholder="请输入数量"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="费用合计" labelWidth="90">
						<view>
							<text style="position: relative; top: 15rpx"
								>{{ customCost.number * customCost.unitPrice || "0" }}
							</text>
						</view>
					</uni-forms-item>
				</uni-forms>

				<view class="commitBtn" @click="commitCost">提交</view>
			</view>
		</u-popup>

		<u-popup
			:show="showOrderRemark"
			mode="bottom"
			@close="showOrderRemark = false"
			closeable
			round="20">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx 20rpx">
				<view style="margin-bottom: 30rpx">提交订单说明</view>
				<uni-forms ref="form1" style="width: 100%">
					<uni-forms-item label="说明" required>
						<view>
							<u--textarea
								v-model="remark"
								placeholder="请输入500字以内的订单说明"
								count
								maxlength="500"></u--textarea>
						</view>
					</uni-forms-item>
				</uni-forms>

				<view class="commitBtn" @click="commitOrderRemark">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import orderBasicInfo from "./component/orderBasicInfo.vue";
	import orderIlleaglInfo from "./component/orderIlleaglInfo.vue";
	import orderReletInfo from "./component/orderReletInfo.vue";
	import orderCostInfo from "./component/orderCostInfo.vue";
	import orderOperation from "./component/orderOperation.vue";
	import moreNavigation from "./component/moreNavigation.vue";
	import * as orderApi from "@/api/order-api.js";
	import { orderRemark } from "@/api/order-api.js";

	export default {
		components: {
			orderBasicInfo,
			orderIlleaglInfo,
			orderReletInfo,
			orderCostInfo,
			orderOperation,
			moreNavigation,
		},
		data() {
			return {
				orderNo: "",
				currentType: 1,
				showMore: false,
				showOrderRemark: false,
				remark: "",
				orderDetail: {
					orderInfo: {},
					carIllegalList: [],
				},
				tabs: [
					{
						title: "基础信息",
						type: 1,
					},
					{
						title: "违章信息",
						type: 2,
					},
					{
						title: "续租信息",
						type: 3,
					},
					{
						title: "费用信息",
						type: 4,
					},
				],
				reletList: [],
				orderRentDetail: null,
				orderDepositDetail: null,
				orderIllegalDetail: null,
				orderVehicleDetail: null,
				orderViolationDetail: null,

				showPayCost: false,
				payCostList: [],
				currentPayItem: null,
				showPopCost: false,
				chargeItemsTypes: [
					{
						value: 1,
						text: "按次",
					},
					{
						value: 2,
						text: "按天",
					},
					{
						value: 6,
						text: "按个",
					},
					// {
					// 	value: 3,
					// 	text: '按里程'
					// }
				],
				customCost: {
					chargeProjectName: "",
					chargeMoney: "",
					chargeItemsType: 1,
					canEdit: 3,
					number: "1",
					unitPrice: "",
				},
			};
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.orderNo = item.orderNo;
			uni.$on("refreshOrder", (data) => {
				this.refreshDetailInfo();
			});
			this.refreshDetailInfo();
		},
		methods: {
			// 提交订单说明
			commitOrderRemark() {
				if (uni.$u.test.isEmpty(this.remark)) {
					uni.$u.toast("请输入订单说明");
					return;
				} else {
					orderApi
						.orderRemark({
							orderNo: this.orderNo,
							remarkContent: this.remark,
						})
						.then((res) => {
							this.showOrderRemark = false;
							this.remark = "";
							this.getOrderDetail();
						});
				}
			},
			clickOpItem(btnInfo) {
				this.showMore = false;

				let path = btnInfo.path;
				if (btnInfo.code == 100) {
					//费用缴纳
					if (this.payCostList.length > 0) {
						this.showPayCost = true;
					} else {
						uni.$u.toast("暂无可缴纳费用");
					}
				} else if (btnInfo.code == 888) {
					//合同信息
					console.log("合同信息");
					uni.navigateTo({
						url: "/order/shortOrder/orderContract?orderNo=" + this.orderNo,
					});
				} else if (btnInfo.code == 300) {
					//编辑订单
					uni.navigateTo({
						url: "/workbench/order/shortRentOrder/add?orderNo=" + this.orderNo + "&type=2",
					});
				} else if (btnInfo.code == 666) {
					//客户信息
					uni.navigateTo({
						url: "/customer/add?type=1" + "&memberNo=" + this.orderDetail.customerInfo.memberNo,
					});
					uni.$once("refreshCustomer", () => {
						this.getOrderDetail();
					});
				} else if (btnInfo.code == 0) {
					if (
						this.orderDetail.orderInfo.rentIspay == 1 &&
						this.orderDetail.orderInfo.depositIspay == 1 &&
						this.orderDetail.orderInfo.illegalIspay == 1
					) {
						this.canleOrder();
					} else {
						uni.navigateTo({
							url: "./cancleOrder?orderNo=" + this.orderNo,
						});
					}
				} else {
					var item = {
						carId: this.orderDetail.carInfo.carId,
						control: this.orderDetail.control,
						fuelType: this.orderDetail.carInfo.fuelType,
						orderNo: this.orderNo,
						memberName: this.orderDetail.customerInfo.memberName,
						orderStatus: this.orderDetail.orderInfo.orderStatus,
						memberType: this.orderDetail.customerInfo.memberType,
						memberPhone: this.orderDetail.customerInfo.memberPhone,
						modelName: this.orderDetail.orderInfo.modelName,
						rentalStartTime: this.orderDetail.orderInfo.rentalStartTime,
						rentalEndTime: this.orderDetail.orderInfo.rentalEndTime,
						actualStartTime: this.orderDetail.orderInfo.actualStartTime,
						actualEndTime: this.orderDetail.orderInfo.actualEndTime,
						carNo: this.orderDetail.carInfo.carNo,
						salesman: this.orderDetail.orderInfo.salesman,
						btnCode: btnInfo.code,
						reserveTakeStoreId: this.orderDetail.orderInfo.takeStoreId || "",
						reserveAlsoStoreId: this.orderDetail.orderInfo.alsoStoreId || "",
						leaseDays: this.orderDetail.orderInfo.leaseDays || 0,
					};
					// 判断车辆押金|违章押金是否结清
					if (path == "depositSettlement" || path == "illegalSettlement") {
						var param = "";
						if (path == "depositSettlement") {
							param = item.orderNo + "/1";
						} else {
							param = item.orderNo + "/2";
						}
						orderApi.orderCostIspay(param).then((res) => {
							if (res.data.code == 1) {
								uni.showModal({
									title: "提示",
									content: res.data.title,
									cancelText: "取消",
									confirmText: "确认结算",
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url:
													"/order/shortOrder/" +
													path +
													"?item=" +
													encodeURIComponent(JSON.stringify(item)),
											});
										}
									},
								});
							} else {
								uni.navigateTo({
									url:
										"/order/shortOrder/" +
										path +
										"?item=" +
										encodeURIComponent(JSON.stringify(item)),
								});
							}
						});
					} else {
						uni.navigateTo({
							url:
								"/order/shortOrder/" + path + "?item=" + encodeURIComponent(JSON.stringify(item)),
						});
					}
				}
			},
			//确定提交费用项
			commitCost() {
				if (uni.$u.test.isEmpty(this.customCost.chargeProjectName)) {
					uni.$u.toast("请输入费用项名称");
					return;
				} else if (uni.$u.test.isEmpty(this.customCost.unitPrice)) {
					uni.$u.toast("请输入单价");
					return;
				} else if (uni.$u.test.isEmpty(this.customCost.number)) {
					uni.$u.toast("请输入数目");
					return;
				} else if (this.customCost.number == "0") {
					uni.$u.toast("数目不能为0,请重新输入");
					return;
				} else {
					this.customCost.chargeMoney = this.customCost.number * this.customCost.unitPrice;
					orderApi
						.addNewExpenses({
							orderNo: this.orderNo,
							chargeItemsVo: [this.customCost],
						})
						.then((res) => {
							uni.showToast({
								title: "新增费用成功",
							});
							this.showPopCost = false;
						});
				}
			},
			// 取消订单
			canleOrder() {
				uni.showModal({
					title: "提示",
					content: "确认取消订单吗?",
					cancelText: "取消",
					confirmText: "确认",
					success: (res) => {
						if (res.confirm) {
							orderApi
								.cancelAndRefund({
									orderNo: this.orderNo,
								})
								.then((res1) => {
									if (res1.code == 1) {
										uni.$u.toast("取消成功");
										uni.$emit("refreshOrder");
										uni.navigateBack();
									}
								});
						}
					},
				});
			},
			//费用缴纳按钮
			paymentFee() {
				this.currentPayItem = null;
				this.payCostList = [];
				orderApi.getAllPaymentOfFees(this.orderNo).then((res) => {
					let data = res.data;
					data.map((item) => {
						if (item.unpaidAmount > 0 && item.payStatus == 1) {
							this.payCostList.push(item);
						}
					});
				});
			},
			changeCostItem(item) {
				this.payCostList.map((costItem) => {
					costItem.selected = false;
				});
				item.selected = true;
				this.currentPayItem = item;
				this.$forceUpdate();
			},
			confimPayFee() {
				if (this.currentPayItem) {
					this.showPayCost = false;
					uni.navigateTo({
						url:
							"/order/shortOrder/orderPayFee?type=" +
							this.currentPayItem.type +
							"&orderNo=" +
							this.orderNo,
					});
				} else {
					uni.$u.toast("请选择需要缴纳的费用项");
				}
			},
			check(e) {
				//正则表达试
				e = e.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				this.$nextTick(() => {
					this.customCost.unitPrice = e;
				});
			},

			//刷新订单信息
			refreshDetailInfo() {
				this.getOrderDetail();

				this.getReletList();
				this.getOrderRentDetail();
				this.getOrderDepositDetail();
				this.getOrderIllegalDetail();
				this.getOrderVehicleDetail();
				this.getOrderViolationDetail();
				this.paymentFee();
			},

			// 获取基础信息
			getOrderDetail() {
				uni.showLoading();
				orderApi.detail(this.orderNo).then((res) => {
					uni.hideLoading();
					this.orderDetail = res.data;
				});
			},

			//续租列表
			getReletList() {
				var params = {
					orderNo: this.orderNo,
				};
				orderApi.renewRecord(this.toParams(params)).then((res) => {
					this.reletList = res.data;
					if (this.reletList.length > 0) {
						this.reletList.map((item) => {
							item.isOpen = false;
						});
					}
				});
			},

			//租金
			getOrderRentDetail() {
				orderApi.orderRentDetail(this.orderNo).then((res) => {
					this.orderRentDetail = res.data;
				});
			},
			//车辆押金
			getOrderDepositDetail() {
				orderApi.orderDepositDetail(this.orderNo).then((res) => {
					this.orderDepositDetail = res.data;
				});
			},
			//违章押金
			getOrderIllegalDetail() {
				orderApi.orderIllegalDetail(this.orderNo).then((res) => {
					this.orderIllegalDetail = res.data;
				});
			},
			//车损费用
			getOrderVehicleDetail() {
				orderApi.orderVehicleDetail(this.orderNo).then((res) => {
					this.orderVehicleDetail = res.data;
				});
			},
			//违章费用
			getOrderViolationDetail() {
				orderApi.orderViolationDetail(this.orderNo).then((res) => {
					this.orderViolationDetail = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.orderPage {
		padding-bottom: 110rpx;

		&.activePage {
			padding-bottom: 0;
		}
	}

	.tabBox {
		background-color: #fff;
		height: 92rpx;
		padding: 0 26rpx;

		.tabItem {
			font-size: 28rpx;
			color: #333333;

			&.active {
				color: #2879ff;

				&::after {
					content: "";
					display: block;
					width: 40rpx;
					height: 6rpx;
					background: #2879ff;
					border-radius: 3rpx;
					position: relative;
					left: 30rpx;
					top: 4rpx;
				}
			}
		}
	}

	.payCostItem {
		height: 80rpx;
		width: 600rpx;
		border-bottom: 1rpx solid #ededed;
	}

	.alertBtn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #1673ff;
		color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.commitBtn {
		background-color: #1673ff;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		width: 300rpx;
		margin-top: 30rpx;
	}
</style>
